<template>
  <PanelLabelItem class="radio-group">
    <el-radio-group v-model="check" v-bind="$attrs" @change="change">
      <el-radio v-for="item in options" :key="item.value" :label="item.value" size="large">
        {{ item.label }}
      </el-radio>
    </el-radio-group>
  </PanelLabelItem>
</template>

<script setup lang='ts'>
import { computed, type PropType } from 'vue';
import { PanelLabelItem } from '@/components/base-panel';
defineOptions({
  name: 'CheckRadioGroup'
});
const props = defineProps({
  options: {
    type: Array as PropType<any[]>,
    default: () => {
      return [];
    },
    required: true
  },
  select: {
    type: [String, Number],
    default: '',
    required: true
  }
});
const emit = defineEmits(['change', 'update:select']);
const check = computed({
  get() {
    return props.select;
  },
  set(value) {
    emit('update:select', value);
  }
});
const change = (value: string | number | boolean) => {
  emit('change', value);
};
</script>

<style lang="scss" scoped>
.radio-group {
  :deep(.el-radio) {
    .el-radio {
      &--large {
        height: 22px;
        line-height: 22px;
      }

      &__inner {
        &::after {
          width: 6px;
          height: 6px;
        }
      }
    }
  }
}
</style>
